<template>
    <div class="body">
        <div class="swiper">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image.id">
                    <img :src="image.src" style="width: 100%;" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="buttonList" style="margin-top: 20px;">
            <van-grid :column-num="4" icon-size="60" :border="false">
                <van-grid-item v-for="item in gridList" :key="item.id" :icon="item.icon" :text="item.text" />
            </van-grid>
        </div>
        <div class="musicList">
            <div class="topTips">
                <div style="font-size: 20px; font-weight: bold;">
                    发现好歌单
                </div>
                <div>
                    <van-button size="small" style="height:30px;" plain round type="default">查看更多</van-button>
                </div>
            </div>
            <div class="detailMusicList">
                <van-grid :column-num="2" icon-size="150" :border="false">
                    <van-grid-item v-for="item in musicList" :key="item.id" :icon="item.icon" :text="item.text" />
                </van-grid>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const images = ref([
    { id: 0, src: 'https://p1.music.126.net/Sbr0Z-erbs5xphXQIjeaSg==/109951171408330095.jpg?imageView&quality=89' },
    { id: 1, src: 'https://p1.music.126.net/HpX9fn62uqPxvDlOF67eLw==/109951171408368773.jpg?imageView&quality=89' },
    { id: 2, src: 'https://p1.music.126.net/CB6e6LsLj9QyW5RQ_YJf_g==/109951171408339564.jpg?imageView&quality=89' },
    { id: 3, src: 'https://p1.music.126.net/Q65hvbO3q7zQOqQdh6lI8A==/109951171408381961.jpg?imageView&quality=89' },
]);
const gridList = ref([
    { id: 0, icon: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.vqq5L3wUw47Wke2BVokLRQAAAA?w=168&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7', text: '为你推荐' },
    { id: 1, icon: 'https://p1.music.126.net/J5Gf2W1XSuwOS0gegA9ryA==/109951168645398914.jpg?param=140y140', text: '私人电台' },
    { id: 2, icon: 'http://p1.music.126.net/Cl0-NpZ0ESTDjJ1HmZ33KA==/109951163460576279.jpg?param=140y140', text: '精选歌单' },
    { id: 3, icon: 'http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=150y150', text: '飙升榜单' },
]);
const musicList = ref([
    {id: 0, icon: 'https://p1.music.126.net/Cl0-NpZ0ESTDjJ1HmZ33KA==/109951163460576279.jpg?param=200y200', text: '100首华语民谣'},
    {id: 0, icon: 'http://p2.music.126.net/8fQ9jzTJnMweLNm7VoyPSw==/6623458045881301.jpg?param=140y140', text: '那些你熟悉却又不知道...'},
    {id: 0, icon: 'https://p1.music.126.net/OTZ7izmTCziHI19UNogcLQ==/109951163050828782.jpg?param=200y200', text: '想开家茶馆'},
    {id: 0, icon: 'https://p1.music.126.net/HIUy568wk914exFZai5GXA==/109951163554890901.jpg?param=200y200', text: '『纯音乐』当雨滴敲响琴键'},
    {id: 0, icon: 'https://p1.music.126.net/OIfKTottmMwlK_9Jo_H11w==/109951163890174392.jpg?param=200y200', text: '「居家古风」如何把生活过成诗'},
    {id: 0, icon: 'https://p1.music.126.net/6lhQ6jqPaBfsRdOJEgeiYw==/109951168239184663.jpg?param=200y200', text: '国风新潮大赏 | 歌声岂合世间闻'},
    {id: 0, icon: 'https://p1.music.126.net/UDpjFEHmXInxGd_xMAI12w==/109951162811986419.jpg?param=200y200', text: '孤独的心诠释诗意和远方'},
    {id: 0, icon: 'https://p1.music.126.net/6imPsFlxX3iXwK_2TZGuQA==/109951164854408532.jpg?param=200y200', text: '电子·中国风 | 感受角徵宫商'},
]);
</script>
<style lang="less" scoped>
.musicList {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;

    .topTips {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>